<!DOCTYPE html>
<html>
<head>
    {include file="common/meta" /}
    <link href="__CDN__/assets/css/user.css?v={$Think.config.site.version}" rel="stylesheet">
    <style>
        @font-face
        {
            font-family: XiaoYaoMaoBi;
            src: url('/assets/fonts/ssxysft.ttf');
        }
        #watch{

            font-family: Consolas, "Liberation Mono", Courier, "微软雅黑";
            margin-top: 10%;
            font-size:5vw;
            text-align: center;
            background-color: #0d6aad;
            color: #aaff00;

        }
        .solar{

            margin-top: 30px;
            font-size:3vw;
            text-align: center;
            font-family: XiaoYaoMaoBi;
            background-color:  #0d6aad;
            color: #aaff00;
        }
        .ganzhi{

            margin-top: 30px;
            font-size:3vw;
            text-align: center;
            font-family: XiaoYaoMaoBi;
            background-color:  #0d6aad;
            color: #aaff00;
        }


    </style>
</head>

<body>

{include file="common/nav" /}
<main class="content">
    <div id = "watch"></div>
   <div class="solar">
        {$dateInfo.lunar_year_chinese}-{$dateInfo.lunar_month_chinese}-{$dateInfo.lunar_day_chinese}-{$dateInfo.lunar_hour_chinese}
    </div>

    <div class="ganzhi">
        {$dateInfo.ganzhi_year}-{$dateInfo.ganzhi_month}-{$dateInfo.ganzhi_day}-{$dateInfo.ganzhi_hour}
    </div>


</main>

{include file="common/footer" /}

{include file="common/script" /}
<script>
    //获取id是 watch的元素
    var watch = document.getElementById('watch');
    //调用 获取日期时间
    getDateTime();
    //开启定时器
    setInterval (getDateTime,1000);

    //定义定时器的回调函数，获取当前日期时间

    function getDateTime(){
        //创建时间，日期，对象
        var date = new Date();

        //获取年月日时分秒
        var y = date.getFullYear();
        var m = date.getMonth()+1;
        var d = date.getDate();
        var h = date.getHours();
        var i = date.getMinutes();
        var s = date.getSeconds();


        //如果个位前面补充零
        m = m < 10 ? '0' + m : m;
        d = d < 10 ? '0' + d : d;
        h = h < 10 ? '0' + h : h;
        i = i < 10 ? '0' + i : i;
        s = s < 10 ? '0' + s : s;

        var dateTimeStr = y + '-'+ m + '-'+ d + ' '+ h + ':' + i + ':' + s ;

        //把字符串显示在元素中
        watch.innerHTML = dateTimeStr;
        //每过一小时就刷新一下
        if(i =='59' && s == '59')
        {
            location.reload();
        }


    }


</script>
</body>

</html>